<template>
  <el-card>
    <el-skeleton :rows="13" animated :loading="loading">
      <div class="menu">
        <el-backtop target=".menu" :bottom="5" :right="100">
          <div
            style="
              height: 100%;
              width: 100%;
              background-color: var(--el-bg-color-overlay);
              box-shadow: var(--el-box-shadow-lighter);
              text-align: center;
              line-height: 40px;
              color: #1989fa;
            "
          >
            UP
          </div>
        </el-backtop>
        <el-row :gutter="20" class="header">
          <el-button type="primary" size="default" @click="addMenu()"
            >增加菜单</el-button
          >
        </el-row>

        <el-table
          :data="tableData"
          style="width: 100%"
          border
          row-key="id"
          default-expand-all
        >
          <el-table-column
            v-for="(item, index) in options"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :width="item.width"
            align="center"
          >
            <template #default="{ row }" v-if="item.label === '菜单类型'">
              <el-tag
                effect="dark"
                :type="row.type == '1' ? '' : 'success'"
                round
              >
                {{ row.type == '1' ? '菜单' : '按钮' }}
              </el-tag>
            </template>
            <template #default="{ row }" v-else-if="item.label === '操作'">
              <el-button
                type="primary"
                size="small"
                :icon="Plus"
                @click="addMenu(row)"
                :disabled="row.type === '2' ? true : false"
                title="添加"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                @click="editMenu(row)"
                title="修改"
              ></el-button>
              <el-popconfirm
                title="Are you sure to delete this?"
                @confirm="deleteMenu(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    title="删除"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-skeleton>
  </el-card>

  <Dialog
    v-model="dialogVisible"
    v-if="dialogVisible"
    :dialogTitle="dialogTitle"
    :dialogValue="dialogValue"
    @update:menuAndSelectInit="menuAndSelectInit"
  />
</template>

<script setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { options } from './options'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import Dialog from './components/dialog.vue'
import { isNull } from '@/utils/filters.js'
import cloneDeep from 'lodash/cloneDeep'
import { removeMenuList } from '@/api/authority.js'
import { ElMessage } from 'element-plus/lib/components'
import { handleTokenExpire } from '@/utils/handleTokenExpire.js'

const loading = ref(true)

const dialogValue = ref({})

const dialogTitle = ref('')

const dialogVisible = ref(false)

const store = useStore()

// 初始化全部菜单
const initAllMenuList = async () => {
  try {
    await store.dispatch('app/getTreeAllMenuList')
    loading.value = false
  } catch (error) {
    handleTokenExpire(error)
  }
}

initAllMenuList()
// table中的数据从vuex中获取
const tableData = computed(() => store.getters.treeAllMenuList)

const menuAndSelectInit = () => {
  initAllMenuList()
}

// 处理增加菜单 不能使用id判断了
const addMenu = (row) => {
  if (isNull(row)) {
    dialogValue.value = {
      id: '',
      pid: '',
      pidName: '',
      name: '',
      type: '1',
      permissionValue: '',
      path: '',
      component: ''
    }
    dialogTitle.value = '增加菜单'
  } else {
    const { id, name } = JSON.parse(JSON.stringify(row))
    dialogValue.value = {
      id: '',
      pid: id,
      pidName: name,
      name: '',
      type: '',
      permissionValue: '',
      path: '',
      component: ''
    }
    dialogTitle.value = '增加子级菜单或按钮'
  }
  dialogVisible.value = true
}

// 处理编辑菜单
const editMenu = (row) => {
  // 在编辑菜单中需要先获取其pid对应的名称
  const pml = cloneDeep(store.getters.menuNameAndIdList)
  const copyRow = cloneDeep(row)
  const pid = copyRow.pid
  const getInfo = pml.filter((item) => item.id === pid)[0]

  const handleList = {
    id: copyRow.id,
    pid: getInfo.id,
    pidName: getInfo.name,
    name: copyRow.name,
    type: copyRow.type,
    permissionValue: copyRow.permissionValue,
    path: copyRow.path,
    component: copyRow.component
  }
  // console.log(handleList)
  dialogValue.value = handleList
  dialogTitle.value = '编辑菜单或按钮'
  dialogVisible.value = true
}

const deleteMenu = async (row) => {
  try {
    await removeMenuList(row.id)
    ElMessage({
      type: 'success',
      duration: 1500,
      message: '删除成功'
    })
    menuAndSelectInit()
  } catch (error) {
    ElMessage({
      type: 'error',
      duration: 1500,
      message: error
    })
  }
}
</script>

<style lang="scss" scoped>
.menu {
  height: 515px;
  overflow: auto;
  overflow-y: scroll;
  overflow-x: hidden;
}
.header {
  margin-bottom: 15px;
  margin-left: 0px !important;
}
// 定义滚动条样式（高宽及背景）
// 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度
:deep(.menu)::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #f5f7fa;
}
// 定义滚动条轨道（凹槽）样式
:deep(.menu)::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px white;
  border-radius: 10px;
  background: white;
}

// 定义滑块 样式  height:滚动条滑块长度
:deep(.menu:hover)::-webkit-scrollbar-thumb {
  border-radius: 30px;
  width: 66px;
  box-shadow: inset 0 0 5px rgba(238, 237, 237, 0.2);
  background: #c0c4cc;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #f5f7fa;
}
// 定义滚动条轨道（凹槽）样式
:deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(179, 177, 177, 0.3);
  border-radius: 10px;
  background: white;
}

// 定义滑块 样式  height:滚动条滑块长度
:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
  border-radius: 30px;
  width: 66px;
  box-shadow: inset 0 0 5px rgba(238, 237, 237, 0.2);
  background: #c0c4cc;
}
</style>
